<template>
    <div class="order-refund-actions">
        <van-button round plain size="small" v-if="showCancelButton" @click="handleCancel">取消申请</van-button>
        <van-button round plain size="small" type="primary" :to="'/orders/' + refund.orderId + '/refunds/' + refund.id">查看详情</van-button>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { Button, Dialog } from "vant"

  const { OrderRefundStatus } = order

  export default {
    name: "OrderRefundActions",
    components: {
      [Button.name]: Button,
      [Dialog.name]: Dialog,
    },
    props: {
      refund: order.OrderRefund,
    },
    computed: {
      refundStatus() {
        return this.refund.status
      },
      showCancelButton() {
        const { refundStatus } = this
        return refundStatus === OrderRefundStatus.Applying
      },
    },
    data() {
      return {
        confirmPickupDialogVisible: false,
      }
    },
    methods: {
      handleCancel() {
        const { refund } = this
        new Promise((resolve, reject) => {
          this.$dialog.confirm({
            confirmButtonText: "再考虑下",
            cancelButtonText: "取消申请",
            message: "订单还未付款，确定要取消吗？",
          }).then(reject)
            .catch(resolve)
        })
          .then(() => order.OrderServiceV1.cancelOrderRefund(refund.orderId, refund.id))
          .then(() => this.$emit("cancel"))
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-refund-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;

        .van-button {
            margin-left: 9px;
            width: 80px;
        }
    }
</style>
